<template>
	<view class="page">
		<map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
			<cover-view class="msg-box">
				<view class="img-box">
					<image :src="$util.img(user_info.img)" mode="aspectFill"></image>
				</view>
				<view class="info-box">
					<view class="community-name">{{title}}</view>
					<view class="community-leader">团长:<text>{{user_info.name}}</text></view>
					<view class="community-leader">电话:<text>{{user_info.mobile}}</text></view>
					<view class="community-address">地址:<view class="address">{{user_info.address}}</view>
					</view>
				</view>
			</cover-view>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: '自提点',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742
				}],
				user_info: {
					name: '',
					mobile: '',
					img: '',
					address: ''
				}
			}
		},
		onLoad(option) {
			console.log(option)
			if (option.lat != 0 && option.log != 0) {
				this.latitude = option.lat
				this.longitude = option.log
				this.covers[0].latitude = option.lat
				this.covers[0].longitude = option.log
				this.user_info.name = option.name
				this.user_info.mobile = option.mobile
				this.user_info.img = option.store_img
				this.title = option.store_name
				this.user_info.address = option.address
			} else {
				uni.navigateBack()
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.page {
		map {
			position: relative;

			.msg-box {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 370rpx;
				background-color: white;
				border-top-left-radius: $border-radius;
				border-top-right-radius: $border-radius;
				padding: $padding;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;
				padding-top: 60rpx;
				.img-box {
					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: $border-radius;
					}
				}

				.info-box {
					margin-left: 10rpx;
					display: flex;
					align-items: flex-start;
					flex-direction: column;


					.community-name {
						line-height: 1.5;
						color: $color-title;
						font-size: $font-size-base;
					}

					.community-leader {
						display: flex;
						align-items: flex-start;
						line-height: 1.5;

						text {
							color: $color-sub;
							margin-left: 6rpx;

						}
					}

					.community-address {
						display: flex;
						align-items: flex-start;
						line-height: 1.5;

						.address {
							margin-left: 6rpx;
							color: $color-sub;
							line-height: 1.5;
							white-space: pre-wrap;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
